<template>
  <div class="warp" v-loading="loading">
    <div class="header">
      <img
        v-if="ItemFileInfo && ItemFileInfo.coverImage"
        :src="
          'http://inv.yuyimed.net:8666/investigationCoverImage/' + ItemFileInfo.coverImage
        "
      />
    </div>
    <ul class="url-list">
      <li class="header-title">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link header-title">
            {{ ItemFileInfo.title }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in onDirectoryList"
                :key="item.uuid"
                :command="item"
                :class="ItemFileInfo.uuid === item.uuid ? 'selected' : ''"
                >{{ item.title }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li class="url-list-item" v-for="item in ItemFileInfo.items" :key="item.id">
        <a :href="item.url" class="item-info">
          <label>{{ item.label }}</label>
          <span
            ><img
              width="15px"
              src="https://yuyimed.oss-cn-beijing.aliyuncs.com/temporary/right.png"
          /></span>
        </a>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { FileItem, ItemFileInfo } from "@/api/types/index";
import { useItemsStore } from "@/store/modules/items";
import { storeToRefs } from "pinia";

const _useItemsStore = useItemsStore();
const { DIRECTORY_LIST, directoryList } = storeToRefs(_useItemsStore);
const onDirectoryList = computed(() => DIRECTORY_LIST.value.filter((t) => !t.isDelete));
const ItemFileInfo = ref<ItemFileInfo>({
  uuid: "",
  coverImage: "",
  dateTime: "",
  title: "",
  isDelete: false,
  items: [],
});
const getInfo = (uuid: string) => {
  _useItemsStore
    .getItemFileInfo(uuid)
    .then((result) => {
      if (result.code === 200 && result.data) {
        ItemFileInfo.value = result.data;
      }
    })
    .catch((err) => {});
};
const handleCommand = (command: FileItem) => {
  getInfo(command.uuid);
};

const loading = ref(false);
const getItemInfo = () => {
  const timer = setInterval(() => {
    if (directoryList.value && directoryList.value.length) {
      getInfo(directoryList.value[0].uuid);
      loading.value = false;
      clearInterval(timer)
    }
  }, 500);
};

onMounted(() => {
  if (directoryList.value && directoryList.value.length) {
    loading.value = true;
  }
  getItemInfo();
});
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .warp {
    width: 600px;
  }
}

.warp {
  margin: auto;
  height: 100vh;
}
.header img {
  width: 100%;
  max-height: 500px;
}

.url-list {
  list-style-type: none;
  padding: 0;
}

.url-list li {
  padding-left: 10px;
}

.header-title {
  background-color: white;
  line-height: 50px;
  border-bottom: 1px solid #efefef;
}

.url-list-item {
  background-color: white;
  line-height: 40px;
  height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

.item-info {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}

.url-list-item:hover {
  background-color: #fafafa;
}

.url-list-item label:hover {
  transition: 0.3s;
  color: #2490f8;
}

.url-list-item label {
  color: #484848;
  text-decoration: none;
  cursor: pointer;
}

.url-list-item span {
  width: 20px;
  color: #b9b9b9;
}
</style>
<style>
.selected {
  color: #15a5f1 !important;
}
</style>
